<template>
  <div class="com-media-preview" @click.stop="() => { return }">
    <div v-if="isPicFile()" class="view-pic mt10 mb20">
      <van-image lazy-load :src="computedUrl" fit="fill"/>
    </div>
    <div v-else-if="isVodFile" class="view-video mt10" :class="videoLoaded ? 'video-loaded' : ''">
      <iframe :id="'webview' + guid" :src="iframeSrc" class="iframe-video"
              v-if="autoLoad || videoLoaded"></iframe>
      <view :iframeMsg="iframeMsg" :change:iframeMsg="renderModal.handleIframeMsg"></view>
      <button size="mini" type="primary" v-if="!autoLoad && !videoLoaded" @click="handleVideo">加载视频</button>
    </div>
    <div v-else-if="isVideoFile()" class="view-video mt10" :class="videoLoaded ? 'video-loaded' : ''">
      <video
          class="videoEle"
          :id="guid"
          :src="videoSrc"
          @play="handleVideoPlay"
          v-if="autoLoad || videoLoaded"></video>
      <button size="mini" type="primary" v-if="!autoLoad && !videoLoaded" @click="handleVideo">加载视频</button>
    </div>
    <div v-else-if="isAudioFile()" class="view-audio mt10">
      <van-audio
          :src="audioSrc"
          :poster="audioPlay"
          :name="fileName"
          controls
          :initAudio="initAudioEvents"
          @onPlay="handleAudioPlay"
          v-if="autoLoad || videoLoaded"></van-audio>
      <button size="mini" type="primary" v-if="!autoLoad && !videoLoaded" @click="loadAudio">加载音频</button>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from "vuex";
import {parse, getStrUrl, parseQuery} from '@/assets/js/util'
import VanAudio from "@/components/vant/van-audio/van-audio.vue"
import VanImage from "@/components/vant/van-image/van-image.vue"

export default {
  components: {VanAudio, VanImage},
  data() {
    return {
      videoLoaded: false,
      videoSrc: '',
      audioSrc: '',
      audioPlay: '',
      iframeSrc: '',
      iframeMsg: null
    }
  },
  props: {
    // V-视频 A-音频 M-图片
    type: {
      type: String,
      default: ''
    },
    autoLoad: { // 除图片外，视频音频是否自动加载
      type: Boolean,
      default: false
    },
    fileUrl: {
      type: String,
      default: ''
    },
    guid: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: ''
    },
    fileStorage: {
      type: Object,
      default: () => {
      }
    },
  },
  mounted() {

  },
  computed: {
    ...mapGetters({
      audioPlayImg: 'siteInfo/audioPlayImg',
    }),
    isVodFile() {
      return this.fileContent && this.fileContent.uploadType === 'TVOD'
    },
    fileContent() {
      if (this.fileStorage && this.fileStorage.contentUrl) {
        return parse(this.fileStorage.contentUrl)
      }
      return null
    },
    computedUrl() {
      if (this.fileContent) {
        return this.fileContent.playcode || this.fileContent.viewUrl || ''
      }
      return this.url
    }
  },
  watch: {
    currentDplayer(val) {
      if (val != this.guid) {
        this.iframeMsg = {
          id: this.guid,
          type: 'pause'
        }
      }
    }
  },
  methods: {
    ...mapActions({
      updateCurrentDplayer: 'unread/updateCurrentDplayer'
    }),
    isPicFile() {
      return this.type === 'M'
    },
    isVideoFile() {
      return this.type === 'V'
    },
    isAudioFile() {
      return this.type === 'A'
    },
    handleVideo() {
      if (this.isVodFile) {
        this.iframeSrc = `static/html/file.html?id=${this.guid}&fileID=${this.fileContent.fileID}&appId=${this.fileContent.appId}&sign=${this.fileContent.sign}`
        this.videoLoaded = true
      } else {
        this.loadVideo()
      }

    },
    loadAudio() {
      this.videoLoaded = true
      this.audioSrc = this.computedUrl
      this.audioPlay = this.audioPlayImg
    },
    initAudioEvents(initAudio) {
      this.audioPlayer = initAudio
    },
    loadVideo() {
      this.videoLoaded = true
      this.videoSrc = this.computedUrl
      this.initVideoEvents()
    },
    initVideoEvents() {
      this.dplayer = uni.createVideoContext(this.guid, this)
    },
    handleAudioPlay() {
      if (getApp().globalData.currentDplayer) {
        getApp().globalData.currentDplayer.pause()
      }
      if (getApp().globalData.currentAudio && getApp().globalData.currentAudio !== this.audioPlayer) {
        getApp().globalData.currentAudio.pause()
      }
      this.updateCurrentDplayer('')
      getApp().globalData.currentAudio = this.audioPlayer
    },
    handleVideoPlay() {
      if (getApp().globalData.currentDplayer) {
        getApp().globalData.currentDplayer.pause()
      }
      if (getApp().globalData.currentAudio) {
        getApp().globalData.currentAudio.pause()
      }
      this.updateCurrentDplayer('')
      getApp().globalData.currentAudio = this.dplayer
    },
    stopPlayer() {
      this.audioPlayer && this.audioPlayer.pause()
      this.videoPlayer && this.videoPlayer.pause()
      getApp().globalData.currentDplayer = null
      getApp().globalData.currentAudio = null
      this.updateCurrentDplayer('')
    },
    handleMessage(e) {
      if (e.type === 'play') {
        if (getApp().globalData.currentDplayer) {
          getApp().globalData.currentDplayer.pause()
        }
        if (getApp().globalData.currentAudio) {
          getApp().globalData.currentAudio.pause()
        }
        this.updateCurrentDplayer(e.value || '')
      } else if (e.type === 'fullscreenchange') {
        if (e.value) {
          plus.screen.lockOrientation('landscape-primary');
        } else {
          plus.screen.lockOrientation('portrait-primary')
        }
      }
    },
    handleReset() {
      this.iframeMsg = null
    },
  }
}
</script>
<script module="renderModal" lang="renderjs">
export default {
  data() {
    return {
    }
  },
  mounted() {
    // 接收iframe传过来的值
    window.addEventListener('message',  (e)=> {
      this.emitData(e.data)
    });
  },
  methods: {
    emitData(e) {
        this.$ownerInstance.callMethod('handleMessage',e)
    },
    handleIframeMsg(e) {
      if (e) {
        let ob = document.getElementById('webview' + e.id)
        ob.contentWindow.postMessage(Object.assign({}, e),'*')
      }
      this.$ownerInstance.callMethod('handleReset',e)
    }
  }
}
</script>

<style lang="scss" scoped>
.view-pic {
  // width: 400px;
  img {
    width: 100%;
  }
}

.view-audio {
  // width: 400px;
  margin-left: 0;
}

.view-video {
  // width: 400px;
  &.video-loaded {
    height: 200px;
  }

  .videoEle {
    width: 300px;
    height: 200px;
  }

  .iframe-video {
    position: static;
    width: 100%;
    height: 200px;
    border: none;
  }
}

.view-video {
  width: 100%;

  :deep(.video-js) {
    width: 100%;
    height: 100%;
  }
}
</style>